import { Col, Row, Button, Table,Divider } from "antd";
import React,{useCallback, useEffect,useState} from "react";
import request from "@/utils/request";

function Article(){
    const [total,setTotal] = useState(0)
    const [paperItem,setPaperItem] = useState([])
    const [index,setIndex] = useState(1)
    useEffect(()=>{
        async function getData(){
          const {data} = await request.get('/goods/some',{
            params:{
                index
            }
          })
          console.log('data',data)  
          setPaperItem(data.data)
        }
        getData()
    },[])

    const getMore = useCallback(async ()=>{
        const {data} = await request.get('/goods/some',{
            params:{
                index:index+1
            }
        })
        setIndex(index+1)
        setTotal(data.data.length)
        const newDate = [...data.data]
        setPaperItem(newDate)
    },[index])
    // const paperItem = [
    //     {
    //         id:1,
    //         img_url:'2022071516282447.png',
    //         title:'外卖智能自动出餐',
    //         text:'功能说明银豹上线外卖智能自动出餐功能，帮助商家提高外卖平台订单的出餐效率！商家只需登录银豹后台开启外卖智能自...',
    //         samll:'Mose 2022-06-29 89  外卖智能自动出餐 自动出餐 美团外卖 饿了么'
    //     }
    // ]
    return(
        <div>
            {
                paperItem.map(item=>
                  <Row key={item.id}>
                    <Col span={8} style={{padding:20}}>
                    <img width={'100%'} src={`/img/`+item.img_url}/>
                    </Col>
                    <Col span={16} style={{padding:20,paddingRight:40}}>
                        <h4 style={{fontWeight:900,fontSize:20}}>{item.title}</h4>
                        <p style={{color:'#333'}}>{item.text}</p>
                        <p style={{color:'#999',fontSize:12}}>{item.small}</p>
                    </Col>
                  </Row>
                )
            }
           {
                paperItem.length < 100 ?
                <Button onClick={getMore} type="link" block style={{marginBottom:10}}>浏览更多</Button>
                :
                <Divider plain>我是有底线的</Divider>
           }
            
        </div>
    )
}

export default Article